<template>
  <div v-if="pageflag" class="display-flex" style="height: 100%">
    <div style="height: 100%; width: 50%">
      <Echart
        :options="areaOptions"
        id="drawerTop"
        class="drawer-top_center"
        ref="charts"
      ></Echart>
    </div>
    <div
      style="
        height: 100%;
        width: 50%;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
      "
    >
      <div class="display-flex fd-row ai-center">
        <el-avatar :size="25" :src="today"></el-avatar>
        <span class="ml-10"
          >今日报警&nbsp;&nbsp;
          <span style="font-size: 18px; font-weight: bold; color: #fb4a4a">{{
            countTodayWarning
          }}</span> </span
        >次
      </div>
      <div class="display-flex fd-row ai-center">
        <el-avatar :size="25" :src="history"></el-avatar>
        <span class="ml-10"
          >历史报警&nbsp;&nbsp;
          <span style="font-size: 18px; font-weight: bold; color: #fb844a">{{
            countHistoryWarning
          }}</span>
        </span>
        次
      </div>
    </div>
  </div>

  <Reacquire v-else @onclick="getData" style="line-height: 100px">
    重新获取
  </Reacquire>
</template>

<script>
import today from "@/assets/images/icon-today.png";
import history from "@/assets/images/icon-history.png";
export default {
  props: {
    deviceFormId: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      today,
      history,
      option: {},
      pageflag: false,
      countTodayWarning: "",
      countHistoryWarning: "",
    };
  },
  created() {},
  watch: {
    deviceFormId: {
      handler(newValue) {
        if (newValue !== "") {
          this.$nextTick(() => {
            this.getData(newValue);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData() {
      try {
        // const res = await this.$api.screen.getMonitorOverview(id);
        let res = {
          countParam: 2,
          countOnlie: 0,
          countNormal: 2,
          countWarning: 0,
          countTodayWarning: 0,
          countHistoryWarning: 0,
        };
        this.pageflag = true;
        const data = [
          { value: 0, name: "当前正常", field: "countNormal" },
          { value: 0, name: "在线统计", field: "countOnlie" },
          // { value: 0, name: '指标总数', field: 'countParam' },
          { value: 0, name: "当前报警", field: "countWarning" },
        ];
        // for in 遍历对象的属性名
        for (const i in res) {
          // 循环遍历区域类型，匹配id相等的给value赋值
          if (i === "countTodayWarning") {
            this.countTodayWarning = res[i];
          }
          if (i === "countHistoryWarning") {
            this.countHistoryWarning = res[i];
          }
          data.map((item) => {
            // eslint-disable-next-line eqeqeq
            if (item.field == i) {
              item.value = res[i];
              return item;
            }
          });
        }
        // 回显到 echart 图表
        this.initArea(data);
      } catch {
        // 请求失败，显示重新获取
        this.pageflag = false;
      }
    },
    initArea(newData) {
      this.areaOptions = {
        color: ["#FDB528", "#6DBB5D", "#2244B9", "#DF625F", "#66C8F6"],
        series: [
          {
            type: "pie",
            radius: [35, 55],
            // with: 500,
            // height: '99%',
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              // alignTo: 'edge',
              formatter: "{name|{b}}\n{value|{c}}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 12,
                  color: "#fff",
                },
                value: {
                  fontSize: 10,
                },
              },
            },
            labelLine: {
              length: 10, // 第一段线 长度
              length2: 16, // 第二段线 长度
              show: true,
            },
            data: newData,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-top_center {
  margin-top: 10px;
}
</style>
